<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Progress And Meter</title>
    <style>
        body {
            font-family: "Palatino Linotype" serif;
        }

        h1 {
            font-size: x-large;
            margin-top: 20px;
            margin-bottom: 0px;
        }

        p {
            margin: 2px;
        }

        .separatedSection {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Progress Bar</h1>
    Current Progress: <progress max=100 value=50>50%</progress>
    <br>
    Current Progress: <progress>Task in Progress</progress>

    <h1>Meter</h1>
    Your suitcase weighs: <meter min="5" max="70" value="28">28 Pounds</meter>
    Your suitcase weighs: <meter min="5" max="100" high="70" value="79">79 pounds</meter>
    <p><small>* A surcharge applies to suitcases heavier than 70 pounds.</small></p>
    <div class="separatedSection">
        <p>Our goal is to raise $50,000 for SLF (Save the Lemmings Foundation).</p>
        <p>So far we've raised $14,000. <meter max="50000" value="14000"></meter></p>
    </div>
</body>
</html>